<template>
    <div class="center">
        <div class="txhz xh">
            <div class="txhz jf">
                <img :src="img1" class="tu1">
                <div>
                    <p>{{teacher1}}</p>
                    <p>积分：<span>{{teacher}}</span></p>
                    <img src="../assets/jf5.gif" class="tu2">
                </div>
            </div>
            <div class="txhz jf">
                <img :src="img2" class="tu1">
                <div>
                    <p>{{party1}}</p>
                    <p>积分：<span>{{party}}</span></p>
                    <img src="../assets/jf5.gif" class="tu2">
                </div>
            </div>
            <div class="txhz jf">
                <img :src="img3" class="tu1">
                <div>
                    <p>{{customer1}}</p>
                    <p>积分：<span>{{customer}}</span></p>
                    <img src="../assets/jf5.gif" class="tu2">
                </div>
            </div>
            <div class="txhz jf">
                <img :src="img4" class="tu1">
                <div>
                    <p>{{honor1}}</p>
                    <p>积分：<span>{{honor}}</span></p>
                    <img src="../assets/jf5.gif" class="tu2">
                </div>
            </div>
        </div>
        <div class="txhz zf">
            <img src="../assets/jf6.gif" >
            <p class="zjf">总积分</p>
            <p><span>{{all}}</span>分</p>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
    export default{
        data(){
            return{
                img1:require('../assets/jf1.gif'),
                img2:require('../assets/jf2.gif'),
                img3:require('../assets/jf3.gif'),
                img4:require('../assets/jf4.gif'),
                teacher1:"教师功底",
                party1:"贡献参与度",
                customer1:"客户满意度",
                honor1:"教师荣誉",
                teacher:"",
                party:"",
                customer:"",
                honor:"",
                all:""
            }
        },
        methods:{
            
        },
        created:function(){
            // 接收传值
            let that=this
            console.log(this.$router)
            axios
                .get("/system/seeCount",{id:localStorage.getItem("ids")})
                .then(res=>{
                    that.teacher=res.data.data.teacher
                    that.party=res.data.data.party
                    that.customer=res.data.data.customer
                    that.honor=res.data.data.honor
                    that.all=res.data.data.all
                    console.log(res)
                })
        }
    }
</script>
<style scoped>
    .center{width: 96%;margin: 0rem auto;}
    .txhz{display:flex;justify-content:space-between;flex-wrap: wrap;}
    .jf{
        width: 48%;position: relative;border: 1px solid #EFEFEF;border-radius: 20px;box-shadow: #E4E4E4 3px 3px 5px;
        margin-top: 1.4rem;border-top: 0;float: left;margin-right: 1%;padding: 0.6rem 0;
    }
    .jf div{width: 58%;color: #575757;font-size: 0.8rem;line-height: 2rem;}
    .jf span{font-size: 1.6rem;color: #FF5500;}
    .tu1{width: 60px;height: 60px;margin-left: 10px;}
    .tu2{width: 20px;height: 20px;position: absolute;top: 3.1rem;left: 10rem;}
    .zf{border: 1px solid #EFEFEF;border-radius: 20px;box-shadow: #E4E4E4 3px 3px 5px;margin-top: 1.4rem;padding: 0.8rem 1rem;border-top: 0;}
    .zf img{width: 80px;height: 80px;}
    .zf p{width:30%;color: #F49B25;}
    .zf p:last-child{margin-top: 1.2rem;}
    .zf span{font-size: 2.2rem;}
    .zjf{margin-top: 1.6rem;}
</style>